<script setup>
	import {ref} from 'vue'
	const indicatorDots = ref(true)
	const autoplay = ref(true)
	const interval = ref(2000)
	const duration = ref(500)
	defineProps({
		list:[]
	})
	
</script>
<template>
	<view class="uni-margin-wrap">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="item in list" :key="item.id" class="swiper-item">
				<image :src="item.imgUrl" mode="aspectFill" style="width: 100%;"></image>
				<view class="absoluet">
					<view class="name">{{item.name}}</view>
				<view class="subname">{{item.nameEn}}</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<style lang="scss">
	.uni-margin-wrap {
		width: 100%;
	}

	.swiper {
		height: 384rpx;
	}

	.swiper-item {
		display: block;
		height: 384rpx;
		line-height: 384rpx;
		text-align: center;
		position: relative;
		.absoluet{
			position: absolute;
			left: 40rpx;
			bottom: 40rpx;
			color: #fff;
			font-size: 24rpx;
			line-height:32rpx;
			text-align: left;
			.name{
				font-size: 32rpx;
				font-weight: bold;
				padding-bottom:10rpx;
			}
		}
	}
</style>